<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>星际控制中心 v3.0</title>
    <style>
        :root {
            --neon-primary: #0ff;
            --neon-secondary: #f0f;
            --deep-space: #00081d;
            --star-dust: rgba(255,255,255,0.1);
            --hologram-blue: hsl(180, 100%, 50%);
            --hologram-pink: hsl(300, 100%, 50%);
        }

        body {
            margin: 0;
            background: var(--deep-space);
            color: var(--neon-primary);
            font-family: 'Courier New', monospace;
            min-height: 100vh;
            overflow-x: hidden;
            perspective: 1000px;
        }

        .cyber-container {
            position: relative;
            padding: 2rem;
            transform-style: preserve-3d;
        }

        .star-field {
            position: fixed;
            width: 100vw;
            height: 100vh;
            background: 
                radial-gradient(circle at 50% 50%, 
                    var(--star-dust) 0%, 
                    transparent 70%),
                linear-gradient(to bottom right, 
                    transparent 49%,
                    var(--star-dust) 50%,
                    transparent 51%);
            animation: star-twinkle 5s infinite alternate;
        }

        .hologram-header {
            text-align: center;
            padding: 3rem;
            position: relative;
            background: linear-gradient(45deg, 
                transparent 45%,
                var(--hologram-blue) 50%,
                transparent 55%);
            clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
            transform: translateZ(50px);
        }

        .hologram-header h1 {
            font-size: 3rem;
            text-shadow: 
                0 0 10px var(--hologram-blue),
                0 0 20px var(--hologram-pink);
            position: relative;
            background: linear-gradient(90deg,
                var(--hologram-blue),
                var(--hologram-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: title-float 3s ease-in-out infinite;
        }

        .cyber-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            padding: 2rem;
            transform: translateZ(30px);
        }

        .cyber-card {
            background: rgba(0, 8, 29, 0.8);
            border: 2px solid;
            border-image: linear-gradient(45deg, 
                var(--hologram-blue), 
                var(--hologram-pink)) 1;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            transition: 0.5s transform;
        }

        .cyber-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(
                transparent, 
                var(--hologram-blue),
                transparent,
                var(--hologram-pink)
            );
            animation: border-spin 4s linear infinite;
        }

        .cyber-card:hover {
            transform: 
                translateZ(20px) 
                rotateX(5deg) 
                rotateY(5deg);
        }

        .particle-layer {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        @keyframes border-spin {
            100% { transform: rotate(360deg); }
        }

        @keyframes star-twinkle {
            from { opacity: 0.3; }
            to { opacity: 0.8; }
        }

        @keyframes title-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .quantum-input {
            background: transparent;
            border: 1px solid var(--hologram-blue);
            padding: 1rem;
            color: var(--neon-primary);
            transition: 0.3s all;
        }

        .quantum-input:focus {
            outline: none;
            box-shadow: 
                0 0 15px var(--hologram-blue),
                inset 0 0 10px var(--hologram-pink);
        }

        .pulse-button {
            background: linear-gradient(45deg, 
                var(--hologram-blue), 
                var(--hologram-pink));
            border: none;
            padding: 1rem 2rem;
            color: white;
            position: relative;
            overflow: hidden;
            transition: 0.3s transform;
        }

        .pulse-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background: rgba(255,255,255,0.1);
            transform: translate(-50%, -50%) scale(0);
            border-radius: 50%;
            transition: 0.5s transform;
        }

        .pulse-button:hover::after {
            transform: translate(-50%, -50%) scale(1);
        }

        .thrust-value {
            text-align: center;
            margin-top: 1rem;
            font-size: 1.5rem;
        }

        .satellite {
            cursor: pointer;
            fill: url(#energy-gradient);
            transition: transform 0.2s;
        }

        .satellite:hover {
            transform: scale(1.2);
        }

        .details {
            display: none;
            background: rgba(0, 8, 29, 0.8);
            border: 2px solid;
            border-image: linear-gradient(45deg, 
                var(--hologram-blue), 
                var(--hologram-pink)) 1;
            padding: 1rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            color: white;
            width: 200px;
            text-align: center;
        }

        .close-details {
            float: right;
            cursor: pointer;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .energy-indicator {
            text-align: center;
            margin-top: 1rem;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <canvas class="particle-layer" id="particles"></canvas>
    <div class="star-field"></div>

    <div class="cyber-container">
        <header class="hologram-header">
            <h1>🪐 深空控制中心</h1>
            <nav>
                <button class="pulse-button">导航系统</button>
                <button class="pulse-button">星图校准</button>
                <button class="pulse-button">量子通讯</button>
            </nav>
        </header>

        <main class="cyber-grid">
            <article class="cyber-card">
                <h2>🚀 推进器状态</h2>
                <input type="range" class="quantum-input" id="thrustInput" min="0" max="100" value="50">
                <div class="thrust-value" id="thrustValue">50%</div>
            </article>

            <article class="cyber-card">
                <h2>🛰️ 卫星网络</h2>
                <svg viewBox="0 0 300 300" class="constellation-map">
                    <defs>
                        <linearGradient id="energy-gradient">
                            <stop offset="0%" stop-color="var(--hologram-blue)"/>
                            <stop offset="100%" stop-color="var(--hologram-pink)"/>
                        </linearGradient>
                    </defs>
                    <circle cx="50" cy="50" r="10" class="satellite" data-info="Satellite A" />
                    <circle cx="150" cy="150" r="10" class="satellite" data-info="Satellite B" />
                    <circle cx="250" cy="250" r="10" class="satellite" data-info="Satellite C" />
                </svg>
            </article>

            <article class="cyber-card">
                <h2>⚡ 能源分配</h2>
                <svg viewBox="0 0 100 100" class="energy-dial">
                    <path d="M50 15 A35 35 0 1 1 50 85" fill="none" 
                          stroke="url(#energy-gradient)" stroke-width="10"/>
                    <defs>
                        <linearGradient id="energy-gradient">
                            <stop offset="0%" stop-color="var(--hologram-blue)"/>
                            <stop offset="100%" stop-color="var(--hologram-pink)"/>
                        </linearGradient>
                    </defs>
                </svg>
                <input type="range" class="quantum-input" id="energyInput" min="0" max="100" value="50">
                <div class="energy-indicator" id="energyIndicator">50%</div>
            </article>
        </main>

        <div class="details" id="details">
            <span class="close-details">&times;</span>
            <p id="satelliteInfo"></p>
        </div>
    </div>

    <script>
        // 高性能粒子系统
        class ParticleSystem {
            constructor(canvas) {
                this.canvas = canvas;
                this.ctx = canvas.getContext('2d');
                this.particles = [];
                this.resize();
                this.init();
                window.addEventListener('resize', () => this.resize());
            }

            resize() {
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
            }

            init() {
                for (let i = 0; i < 200; i++) {
                    this.particles.push({
                        x: Math.random() * this.canvas.width,
                        y: Math.random() * this.canvas.height,
                        vx: (Math.random() - 0.5) * 0.5,
                        vy: (Math.random() - 0.5) * 0.5,
                        size: Math.random() * 2,
                        color: `hsl(${Math.random()*360}, 70%, 60%)`
                    });
                }
            }

            update() {
                this.ctx.fillStyle = 'rgba(0, 8, 29, 0.05)';
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

                this.particles.forEach(p => {
                    p.x += p.vx;
                    p.y += p.vy;

                    if (p.x < 0 || p.x > this.canvas.width) p.vx *= -1;
                    if (p.y < 0 || p.y > this.canvas.height) p.vy *= -1;

                    this.ctx.beginPath();
                    this.ctx.arc(p.x, p.y, p.size, 0, Math.PI*2);
                    this.ctx.fillStyle = p.color;
                    this.ctx.shadowColor = p.color;
                    this.ctx.shadowBlur = 15;
                    this.ctx.fill();
                });

                requestAnimationFrame(() => this.update());
            }
        }

        // 初始化系统
        const particles = new ParticleSystem(document.getElementById('particles'));
        particles.update();

        // 动态光标效果
        document.addEventListener('mousemove', (e) => {
            const x = e.clientX / window.innerWidth * 100;
            const y = e.clientY / window.innerHeight * 100;
            document.documentElement.style.setProperty('--cursor-x', `${x}%`);
            document.documentElement.style.setProperty('--cursor-y', `${y}%`);
        });

        // 推进器状态
        const thrustInput = document.getElementById('thrustInput');
        const thrustValue = document.getElementById('thrustValue');

        thrustInput.addEventListener('input', function() {
            thrustValue.textContent = `${this.value}%`;
        });

        // 卫星网络
        const satellites = document.querySelectorAll('.satellite');
        const details = document.getElementById('details');
        const satelliteInfo = document.getElementById('satelliteInfo');
        const closeDetails = document.querySelector('.close-details');

        satellites.forEach(satellite => {
            satellite.addEventListener('click', function() {
                satelliteInfo.textContent = this.getAttribute('data-info');
                details.style.display = 'block';
            });
        });

        closeDetails.addEventListener('click', function() {
            details.style.display = 'none';
        });

        // 能源分配
        const energyInput = document.getElementById('energyInput');
        const energyDialPath = document.querySelector('.energy-dial path');
        const energyIndicator = document.getElementById('energyIndicator');

        energyInput.addEventListener('input', function() {
            const angle = (this.value / 100) * 180;
            energyDialPath.setAttribute('d', `M50 15 A35 35 0 ${angle >= 180 ? 1 : 0} 1 50 ${15 + 70 * Math.cos((angle - 90) * Math.PI / 180)} L50 15 Z`);
            energyIndicator.textContent = `${this.value}%`;
        });
    </script>
</body>
</html>



